<template>
  <a-drawer
    v-model:visible="modalVisible"
    class="sl-dialog sl-drawer sl-inside-drawer"
    :width="520"
    style="padding: 0"
    title="点位详情"
    :body-style="{ paddingBottom: 0 }"
    :content-wrapper-style="{ overflow: 'hidden' }"
  >
    <div class="relative">
      <a-descriptions
        class="alarm-descriptions"
        title="基本信息"
        layout="vertical"
        :column="1"
        :label-style="{ color: ' #7B879A' }"
        :content-style="{ color: '#172B4D' }"
      >
        <a-descriptions-item v-for="(item, index) in formData" :key="'function' + index" :label="item.label">
          {{ item.value || "--" }}
        </a-descriptions-item>
        <a-descriptions-item v-for="(item, index) in dataTypeData" :key="'dataType' + index" :label="item.label">
          {{ item.value || "--" }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <template #footer>
      <div class="flex flex-row items-center justify-end h-17">
        <div class="flex-1 -ml-4.5">
          <a-button v-show="!hideNextPrev" type="text" :disabled="preDisabled" @click="updateNextOrPrev(-1)">
            <Icon type="icon-zuo" class="!align-middle h-4" />
            <span class="align-middle">上一个</span>
          </a-button>
          <a-button v-show="!hideNextPrev" type="text" :disabled="nextDisabled" @click="updateNextOrPrev(1)">
            <span class="align-middle">下一个</span>
            <Icon type="icon-you" class="!align-middle h-4" />
          </a-button>
        </div>
      </div>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, computed } from "vue";
import { getDictionaryByType } from "/@/api/aiot/dictionary";
import { attrGet, attrGetSys } from "/@/api/aiot/equipmentType";
import { ParEquipmentAttrItem, ReadWriteType, EventType, FunctionType } from "/@/api/aiot/equipmentType/models";

const props = withDefaults(
  defineProps<{
    id?: string;
    hideNextPrev?: boolean;
    preDisabled?: boolean;
    nextDisabled?: boolean;
    isEnterprise: boolean;
    functionAttrData?: ParEquipmentAttrItem;
  }>(),
  {
    preDisabled: false,
    nextDisabled: false,
    hideNextPrev: false,
  }
);
const dataType = ref({});
onMounted(async () => {
  let data = await getDictionaryByType({ dictionaryType: "DATATYPE" });
  if (data && data.length > 0) {
    data.forEach((item) => {
      dataType.value[item.dictionaryCode] = item.dictionaryName;
    });
  }
});
const emits = defineEmits(["update:id", "update:functionAttrData", "handlePreOrNext"]);
const modalVisible = ref<boolean>(false);
const formData = ref<Array<{ label: string; key: string; value: string }>>([
  { label: "点位名称", key: "attributeName", value: "" },
  { label: "参数名称(显示名称)", key: "attributeDisplayName", value: "" },
  { label: "参数分组", key: "equipmentParamGroupsName", value: "" },
  { label: "读写类型", key: "readWriteType", value: "" },
  { label: "是否显示", key: "display", value: "" },
  { label: "数据类型", key: "dataType", value: "" },
]);
const dataTypeData = computed(() => {
  if (info.value.dataType === "int") {
    return [
      { label: "取值范围", key: "valueRange", value: info.value.valueRange || "--" },
      { label: "单位", key: "unit", value: info.value.unit || "--" },
      { label: "步长", key: "stepSize", value: info.value.stepSize || "--" },
      { label: "值状态说明", key: "attributeDesc", value: info.value.attributeDesc || "--" },
    ];
  } else if (info.value.dataType === "boolean") {
    let extend = info.value.extend ? JSON.parse(info.value.extend) : { trueDesc: "", falseDesc: "" };
    return [
      { label: "布尔值", key: "extend", value: `0:${extend.falseDesc || "--"}/ 1:${extend.trueDesc || "--"}` },
      { label: "值状态说明", key: "attributeDesc", value: info.value.attributeDesc },
    ];
  } else {
    return [{ label: "值状态说明", key: "attributeDesc", value: info.value.attributeDesc }];
  }
});
const info = ref<ParEquipmentAttrItem>({});
watch(
  () => props.functionAttrData,
  (v) => {
    if (v) {
      if (JSON.stringify(v) !== "{}") {
        modalVisible.value = true;
        info.value = v;
      }
    }
  }
);
watch(
  () => props.id,
  async (v) => {
    info.value = {};
    if (v) {
      modalVisible.value = true;
      // attrGetSys
      if (props.isEnterprise) {
        info.value = (await attrGet(v)) || {};
      } else {
        info.value = (await attrGetSys(v)) || {};
      }
    } else {
      modalVisible.value = false;
      formData.value.forEach((item) => {
        item.value = "";
      });
    }
  }
);
watch(modalVisible, (v) => {
  console.info("v==>", v);
  if (!v) {
    emits("update:id", "");
    emits("update:functionAttrData", {});
  }
});
watch(
  () => info.value,
  (v) => {
    if (info.value) {
      formData.value.forEach((item) => {
        if (item.key === "readWriteType") {
          item.value = ReadWriteType[info.value?.readWriteType as any] || "--";
        } else if (item.key === "eventType") {
          item.value = EventType[info.value?.eventType as any] || "--";
        } else if (item.key === "functionType") {
          item.value = FunctionType[info.value?.functionType as any] || "--";
        } else if (item.key === "dataType") {
          item.value = dataType.value[info.value?.dataType as any] || "--";
        } else if (item.key === "display") {
          item.value = info.value.display ? "显示" : "不显示";
        } else {
          item.value = info.value[item.key] || "--";
        }
      });
    }
  }
);
function updateNextOrPrev(d: number) {
  emits("handlePreOrNext", d);
}
</script>
